<?php
$link = $this->link;
$url = $this->url;
$modelR = new RemoveCircumflex();
$list_category = $this->list_category;
$type= $this->type;
?>
    <link rel="stylesheet" href="/js/slider/css/idangerous.swiper.css">
    <link rel="stylesheet" href="/js/slider/css/idangerous.swiper.scrollbar.css">
</head>
<style>
.swiper-container {
  text-align: center;
}
.swiper-wrapper{
    text-align: center;
}
#swiper-nav {
  width: auto;
  height: 60px;
}
.swiper-slide {
  width: 1520px;
  padding: 5px 20px;
  background: #fff;
}
.red-slide {
  background: #ca4040;
}
.blue-slide {
  background: #4390ee;
}
.orange-slide {
  background: #ff8604;
}
.green-slide {
  background: #49a430;
}
.pink-slide {
  background: #973e76;
}
.swiper-scrollbar {
  width: 100%;
  height: 4px;
  position: absolute;
  left: 0;
  bottom: 5px;
  z-index: 1;
}
#swiper-div{
    width: auto;
height: 60px;
padding: 10px 50px;
border: 3px solid white;
margin: 45px 0px 0px 0px;
position: relative;
box-shadow: 0px 0px 5px #000;
}
.arrow-left {
    background: url(/js/slider/img/arrow-left.png) no-repeat left top;
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -15px;
    width: 30px;
    height: 30px;
}
.arrow-right{
    background: url(/js/slider/img/arrow-right.png) no-repeat left top;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -15px;
    width: 30px;
    height: 30px;
}
</style>
<body>
    <div id="swiper-div">
        <a class="arrow-left" href="#"></a>
        <a class="arrow-right" href="#"></a>    
        <div class="swiper-container" id="swiper-nav">
            <div class="swiper-scrollbar"></div>
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                <div id="nav_story">
                <ul class="nav" style="display:  inline-block;">
                    <?php foreach($list_category as $category){?>
                    <li class="nav-li" style="display: inline;">
                        <a  href="/truyen-cuoi.html?type=<?php echo $category['id']; ?>" <?php if($category['id'] == $this->type){ ?>class="current"<?php }?>>
                            <?php echo $category['Catelogy']; ?>
                        </a>
                    </li>
                    <?php }?>
                </ul>
                </div>
                </div>
            </div>
        </div>
    </div>
  <script src="/js/slider/js/idangerous.swiper-2.1.min.js"></script>
  <script src="/js/slider/js/idangerous.swiper.scrollbar-2.1.js"></script>
  <script>
  var mySwiper = new Swiper('.swiper-container',{
    scrollContainer: true,
    scrollbar: {
      container: '.swiper-scrollbar'
    }
  })
  $('.arrow-left').on('click', function(e){
    e.preventDefault()
    mySwiper.swipePrev()
  })
  $('.arrow-right').on('click', function(e){
    e.preventDefault()
    mySwiper.swipeNext()
  })
  
  </script>
<?php
    if(isset($link['_id'])){
        $obj = $this->object;
?>
<!-- TRANG TRUYEN CHI TIET -->
 <!--quang cao-->
<h2 class="label_top"></h2>
<div id="story" style="clear:both;">
    <div class="story">
        <h2><?php echo $obj['Title']?></h2>
        <span class="info_story">Cập nhật: <?php echo $obj['Date'] ?> &nbsp;&nbsp;&nbsp;Lượt xem: <?php echo $obj['hits']?></span>
        <div>
            <?php echo $obj['Content']?>
            <?php echo "<p style='text-align: right; font-weight:bold; font-style: italic'>Người up: ".$obj['Author']."</p>" ?>
        </div>
    </div>
    
    <div id="related_story" class="story">
        <h2 class="label_top">Liên quan:</h2>
        <ul>
            <?php foreach($this->list_related as $item):?>
            <li><a href="/truyen-cuoi/<?php echo $item['_id'];?>-<?php echo $modelR->rewrite($item['Title'])?>.html"><?php echo $item['Title']?></a></li>
            <?php endforeach;?>
        </ul>
    </div>
</div>

<?php }else{ ?>
<!-- TRANG TRUYEN -->
<div class="box_top" style="clear:both;">
    <h2 class="label_top">TRUYỆN CƯỜI &gt;&gt; <?php if(!empty($type)){echo $this->type_name['Catelogy']; }else{echo "MỚI NHẤT"; }?></h2>
    <ul id="list_story">        
         <?php if (count($this->list_story)) :
                foreach($this->list_story  as $item){
         ?>
         <li class="story_item">
                <a href="/truyen-cuoi/<?php echo $item['_id'];?>-<?php echo $modelR->rewrite($item['Title'])?>.html">                
                <span>
                    <h3><?php echo $item['Title']?></h3>
                    <p class="date"><?php echo $item['Date']?></p>
                    <div class="des_story"><?php echo $item['Content']?></div>
                </span>
                <div class="clear"></div> 
                </a>
         </li>
        <?php }?>   
        <?php endif;?>     
    </ul>
</div>
<input type="hidden" name="page" id="page" value="<?php echo $this->page;?>" />
<input type="hidden" name="type" id="type" value="<?php echo $type;?>" /> 
<div style="text-align: center;" id="loadgif_event">
    <img id="animation_image" src="/images/loading.gif" style="display: none;" />
</div>
<?php }?>

<script type="text/javascript">
    var loading = false;
    $( document ).ready(function() {          
        $(window).scroll(function() { //detect page scroll                      
        if($(window).scrollTop() >= $(document).height() - $(window).height())  //user scrolled to bottom of the page?
        {
            if(loading==false) //there's more data to load
            {
                loading = true; //prevent further ajax loading
                $('#animation_image').show(); //show loading image
                var page = $("#page").val();
                var type = $("#type").val();
                //load data from the server using a HTTP POST request
                $.post("/load-more-story.html",{'page': page, 'type': type}, function(data){
                    $('#animation_image').hide();
                    if (data!='') {
                        $("#list_story").append(data); //append received data into the element
                        page++;
                        $("#page").val(page);
                        loading = false;    // release
                    };
                })
            }
        }        
    });
});

</script>